<template>
  <div>
    <div class="jiben">
      <div class="header">基本信息</div>
    </div>

    <!-- 我的订单的内容---------------------------------- -->
    <div class="con">
      <div class="con-left">
        <img
          src="https://img.meituan.net/avatar/d5d7f9193488489071f759bd2eb4870a16368.jpg"
          alt=""
        />

        <!-- 图片--------------------------------------------------- -->

        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button class="btn" size="small" type="primary"
            >更换头像</el-button
          >
          <div slot="tip" class="el-upload__tip">
            支持JPG,JPEG,PNG格式,且文件需小于1M
          </div>
        </el-upload>
      </div>

      <!-- 表单内容-------------------------------------------------------- -->
      <div class="con-right">
        <p class="nic">
          <label>昵称:</label>
          <input
            type="text"
            placeholder="2-15个字，支持中英文、数字"
            v-model="Nickname"
          />
        </p>

        <p class="sex">
          <label>性别:</label>
          <input type="radio" name="gender" @click="getsex(0)" />
          <span>男</span>
          <input type="radio" name="gender" @click="getsex(1)" />
          <span>女</span>
        </p>

        <p class="shengri">
          <label>生日:</label>
          <el-select v-model="birthday.year">
            <el-option
              :label="item + 1920"
              :value="item + 1920"
              v-for="item in 100"
              :key="item"
            ></el-option>
          </el-select>
          <span class="birthday-span">年</span>
          <el-select v-model="birthday.month" placeholder="1">
            <el-option
              :label="item"
              :value="item"
              v-for="item in 12"
              :key="item"
            ></el-option>
          </el-select>
          <span class="birthday-span">月</span>
          <el-select v-model="birthday.day" placeholder="1">
            <el-option
              :label="item"
              :value="item"
              v-for="item in 31"
              :key="item"
            ></el-option>
          </el-select>
          <span class="birthday-span">日</span>
        </p>

        <p class="sex">
          <label>生活状态:</label>
          <input type="radio" name="live" @click="livestatus(0)" />
          <span>单身</span>
          <input type="radio" name="live" @click="livestatus(1)" />
          <span>热恋中</span>
          <input type="radio" name="live" @click="livestatus(2)" />
          <span>已婚</span>
          <input type="radio" name="live" @click="livestatus(3)" />
          <span>为人父母</span>
        </p>

        <p class="shengri">
          <label>从事行业:</label>
          <select style="width: 100px" v-model="industry">
            <option value="信息技术">信息技术</option>
            <option value="金融保险">金融保险</option>
            <option value="商业服务">商业服务</option>
            <option value="建筑地产">建筑地产</option>
            <option value="工程制造">工程制造</option>
            <option value="交通运输">交通运输</option>
            <option value="文化传媒">文化传媒</option>
            <option value="娱乐体育">娱乐体育</option>
            <option value="公共事业">公共事业</option>
            <option value="学生">学生</option>
            <option value="其他">其他</option>
          </select>
        </p>

        <div class="xiangqu">
          <label>兴趣:</label>
          <div class="interest">
            <div
              v-for="(item, index) in interest"
              :key="index"
              class="inter-item"
            >
              <input type="checkbox" @click="interestChange(item)" />
              <div>{{ item }}</div>
            </div>
          </div>
        </div>

        <p class="tips">选择你的兴趣使你获得个性化的电影推荐哦</p>

        <p class="nic">
          <label>个性名称:</label>
          <input type="text" placeholder="20个字以内" v-model="Personality" />
        </p>

        <button class="baocun" @click="preserve">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
import personInfo from "../../model/xinxi";
export default {
  data() {
    return {
      list: [],
      Nickname: "", //昵称
      sex: 1, //1是女  0是男
      livest: 1, //生活状态

      Personality: "", //个性名称
      fileList: [], // 图片上传
      birthday: {
        // 出生日期
        year: "2020",
        month: "1",
        day: "1",
      },
      interestls: [], // 兴趣数组
      interest: [
        "摄影",
        "动漫",
        "摄影",
        "电影",
        "体育",
        "财经",
        "音乐",
        "游戏",
        "科技",
        "旅游",
        "文学",
        "公益",
        "汽车",
        "时尚",
        "宠物",
      ], // 原生兴趣数组
      industry: "信息技术", // 所属行业
    };
  },
  methods: {
    // 获取性别----------------------------------------
    getsex(val) {
      this.sex = val;
      // console.log(this.sex);
    },

    //获取年月日

    // 获取兴趣
    interestChange(val) {
      if (this.interestls.indexOf(val) == -1) {
        this.interestls.push(val); //向数组的末尾添加一个或多个元素，并返回新的长度。
      } else {
        this.interestls = this.interestls.filter((item) => {
          return item != val;
        });
      }
      // console.log(this.interestls);
    },

    //获取生活状态
    livestatus(val) {
      this.livest = val;
      // console.log(this.livest);
    },

    //保存按钮--------------------------------------------
    preserve() {
      // console.log(this.Nickname);
      // console.log(this.sex);
      // console.log(this.livest);
      // console.log(this.Personality); //个性名称
      // console.log(this.birthday);
      // console.log(this.industry);
      // personInfo
      //   .query({
      //     memberInfo: this.Nickname, //昵称
      //     memberSex: this.sex, //性别
      //     memberBirth: this.birthday, //出生年月日
      //     jobName: this.industry, //从事的行业
      //     id: 9,
      //   })
      //   .then((res) => {
      //     this.list = res.data.data;
      //     console.log(this.list);
      //   });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },

  // created() {

  // },
};
</script>
<style scoped lang="scss">
/deep/ .el-select {
  width: 80px;
}
/deep/ .el-input__inner {
  height: 36px;
  line-height: 30px;
  border: 1px solid #000;
  border-radius: 0;
}
.jiben {
  width: 1000px;
  overflow: hidden;
  padding-left: 40px;
  box-sizing: border-box;

  .header {
    height: 77px;
    width: 100%;
    // background: pink;
    color: #ec443f;
    font-size: 18px;
    line-height: 77px;
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 30px;
  }
}

.con {
  width: 1000px;
  height: 900px;

  .con-left {
    width: 270px;
    height: 900px;
    // background: pink;
    margin-left: 40px;
    float: left;
    overflow: hidden;
    text-align: center;

    img {
      width: 258px;
      height: 258px;
    }

    .btn {
      width: 182px;
      height: 56px;
      color: #5b5b5b;
      background-color: #e6e6e6;
      border-radius: 10px;
      font-size: 18px;
      border: 0;
      margin-top: 20px;
    }
  }
  .con-right {
    width: 650px;
    height: 900px;
    // background: skyblue;
    margin-left: 40px;
    float: left;
  }
}

.xuanze {
  text-align: center;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 20px;
}

.chuangjian {
  width: 100px;
  height: 40px;
  background-color: #ed3931;
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
}

.nic {
  color: #333;
  padding: 3px;
  box-sizing: border-box;
  margin-left: 50px;
  margin-bottom: 15px;

  label {
    font-size: 16px;
    color: #333;
    font-weight: 400;
  }
  input {
    margin-left: 10px;
    width: 256px;
    height: 36px;
    border: 1px solid #000;
  }
}

.sex {
  color: #333;
  padding: 3px;
  box-sizing: border-box;
  margin-left: 50px;
  margin-bottom: 20px;
  label {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    margin-right: 15px;
  }

  span {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
    margin-left: 4px;
  }
}

.shengri {
  color: #333;
  padding: 3px;
  box-sizing: border-box;
  margin-left: 50px;
  margin-bottom: 20px;
  label {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    margin-right: 15px;
  }

  select {
    width: 63px;
    height: 30px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .birthday-span {
    margin: 0 10px;
  }
}

.xiangqu {
  color: #333;
  padding: 3px;
  box-sizing: border-box;
  margin-left: 50px;
  margin-bottom: 20px;
  display: flex;

  label {
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    margin-right: 15px;
  }
  .interest {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    .inter-item {
      display: flex;
      align-items: center;
      width: 60px;
      height: 30px;
      font-size: 14px;
    }
  }
  input {
    margin-right: 10px;
  }
}

.tips {
  color: #ccc;
  font-size: 14px;
  margin-left: 50px;
  margin-bottom: 10px;
}

.baocun {
  cursor: pointer;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  color: #fff;
  font-size: 18px;
  background-color: #ed3931;
  border: 0;
  margin-left: 140px;
}
</style>